<template>
	<div class="dialog">
	    <div class="mask"></div>
	    <div class="dialog-content">
	        <h3 class="title">{{ modal.title }}</h3>
	        <p class="text">{{ modal.text }}</p>
	        <div class="btn-group">
	            <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
	            <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
	        </div>
	    </div>
	</div>
</template>

<script>
	export default {
	    name: 'dialog',
	    props: {
	        dialogOption: Object
	    },
	    data() {
	        return {
	            resolve: '',
	            reject: '',
	            promise: '', // 保存promise对象
	        }
	    },
	    computed: {
	        modal: function() {
	            let options = this.dialogOption;
	            return {
	                title: options.title || '提示',
	                text: options.text,
	                cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
	                confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
	            }
	        }
	    },
	    methods: {
	        //确定,将promise断定为完成态
	        submit() {
	            this.resolve('submit');
	        },
	        // 取消,将promise断定为reject状态
	        cancel() {
	            this.reject('cancel');
	        },
	        //显示confirm弹出,并创建promise对象，给父组件调用
	        confirm() {
	            this.promise = new Promise((resolve, reject) => {
	                this.resolve = resolve;
	                this.reject = reject;
	            });
	            return this.promise; //返回promise对象,给父级组件调用
	        }
	    }
	}
</script>